<template>
    <!-- el-row就是根级元素 -->
    <el-row class="register w100" type="flex" justify="end">
        <div class="content h100">
            <el-row class="h100" type="flex" justify="center" align="middle">
                <div class="form-content">
                    <h2 style="color: #489eff;">学生管理系统 | 注册</h2>

                    <!-- 表单根元素 -->

                    <!-- model=>必填项，收集整个表单所有的数据 -->
                    <!-- prop:接收每个输入框对应的校验 -->
                    <el-form :model="registerForm" :rules="registerRules" label-width="80px" label-position="top"
                        hide-required-asterisk ref="registerFormRef">
                        <!-- 账号输入框 -->
                        <el-form-item prop="userName">
                            <!-- 插槽 -->
                            <template #label>
                                <div class="label-row">
                                    <span :class="['label', { active: registerFormActive.userName }]">账号</span>
                                    <span :class="['placeholder', { active: registerFormActive.userName }]"
                                        @click="handleRegisterClick('userName')">账号</span>
                                </div>
                            </template>
                            <el-input ref="userNameRef" v-model="registerForm.userName" prefix-icon="el-icon-user"
                                @focus="handleRegisterFocus('userName')" @blur="handleRegisterBlur('userName')">
                            </el-input>
                        </el-form-item>

                        <!-- 姓名输入框 -->
                        <el-form-item prop="realName">
                            <!-- 插槽 -->
                            <template #label>
                                <div class="label-row">
                                    <span :class="['label', { active: registerFormActive.realName }]">姓名</span>
                                    <span :class="['placeholder', { active: registerFormActive.realName }]"
                                        @click="handleRegisterClick('realName')">姓名</span>
                                </div>
                            </template>
                            <el-input ref="realNameRef" v-model="registerForm.realName" prefix-icon="el-icon-user"
                                @focus="handleRegisterFocus('realName')" @blur="handleRegisterBlur('realName')">
                            </el-input>
                        </el-form-item>


                        <!-- 密码输入框 -->
                        <el-form-item prop="password">
                            <!-- 插槽 -->
                            <template #label>
                                <div class="label-row" style="width:300px" display="flex" justify="center">
                                    <span :class="['label', { active: registerFormActive.password }]">密码</span>
                                    <span :class="['pwplaceholder', { active: registerFormActive.password }]"
                                        @click="handleRegisterClick('password')">密码</span>
                                    <el-input ref="passwordRef" v-model="registerForm.password"
                                        prefix-icon="el-icon-view" autocomplete="off"
                                        @focus="handleRegisterFocus('password')" @blur="handleRegisterBlur('password')">
                                    </el-input>
                                </div>

                            </template>

                        </el-form-item>

                        <!-- 确认密码输入框 -->
                        <el-form-item prop="passwordConfirm">
                            <!-- 插槽 -->
                            <template #label>
                                <div class="label-row" style="width:300px">
                                    <span :class="['label', { active: registerFormActive.passwordConfirm }]">确认密码</span>
                                    <span :class="['pwplaceholder', { active: registerFormActive.passwordConfirm }]"
                                        @click="handleRegisterClick('passwordConfirm')">确认密码</span>

                                    <el-input ref="passwordConfirmRef" v-model="registerForm.passwordConfirm"
                                        prefix-icon="el-icon-view" autocomplete="off"
                                        @focus="handleRegisterFocus('passwordConfirm')"
                                        @blur="handleRegisterBlur('passwordConfirm')">
                                    </el-input>
                                </div>
                            </template>

                        </el-form-item>



                        <!-- 验证码输入框 -->
                        <el-form-item prop="code">
                            <!-- 插槽 -->
                            <template #label>
                                <div class="label-row">
                                    <span :class="['label', { active: registerFormActive.code }]">验证码</span>
                                    <span :class="['placeholder', { active: registerFormActive.code }]"
                                        @click="handleRegisterClick('code')">验证码</span>
                                </div>
                            </template>

                            <el-row type="flex" justify="space-between">
                                <el-input ref="codeRef" v-model="registerForm.code" prefix-icon="el-icon-picture"
                                    @focus="handleRegisterFocus('code')" @blur="handleRegisterBlur('code')">
                                </el-input>

                                <div v-html="captchaImageCode.captchaImage" @click="getCaptchaImage"></div>
                            </el-row>

                        </el-form-item>
                        <!-- 按钮 -->
                        <el-form-item>
                            <el-row type="flex" justify="space-between">
                                <el-button type="primary" @click="handleRegister">注册</el-button>
                                <div>已有账号？
                                    <el-button type="text">
                                        <router-link to="/login" tag="span">立即登录</router-link>
                                    </el-button>
                                </div>
                            </el-row>

                        </el-form-item>
                    </el-form>
                </div>
            </el-row>

        </div>


    </el-row>


</template>

<script>
import { captchaImage } from "@/api/common.js"
import { register } from '@/api/user.js';
export default {
    name: "Register",
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.registerForm.passwordConfirm !== '') {
                    this.$refs.registerFormRef.validateField('passwordConfirm');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.registerForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {

            //注册表单 undefined:浏览器发送接口会自动过滤掉值为undefined的参数
            registerForm: {
                userName: undefined,
                realName: undefined,
                password: '',
                passwordConfirm: '',
                uuid: undefined,
                code: undefined,
            },

            //动态绑定
            registerFormActive: {
                userName: false,
                realName: false,
                password: false,
                passwordConfirm: false,
                code: false,
            },

            //表单校验
            registerRules: {
                //校验字段要和绑定的表单字段一致
                userName: [{
                    //该输入框是必填项
                    required: true,
                    //提示语
                    message: "请输入账号(1-30位中文/英文/数字)",
                    //触发校验的事件：失焦时触发
                    trigger: "blur",
                    //校验成功标志
                    pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]{1,30}$/,
                }],
                realName: [{
                    required: true,
                    message: "请输入姓名(2-5位中文)",
                    trigger: "blur",
                    pattern: /^[\u4e00-\u9faf]{2,5}$/,
                }],

                password: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                passwordConfirm: [
                    { validator: validatePass2, trigger: 'blur' }
                ],


                code: [{
                    required: true,
                    message: "请输入验证码",
                    trigger: "blur",
                }],
            },

            //获取验证码，对象形式存储
            captchaImageCode: {},
        }

    },

    created() {
        this.getCaptchaImage()
    },

    methods: {
        //获取验证码
        getCaptchaImage() {
            captchaImage().then(res => {
                this.captchaImageCode = res.data
            })
        },

        /* 聚焦事件:通过字段控制 */
        handleRegisterFocus(val) {
            this.registerFormActive[val] = true
        },

        /* 失焦事件 */
        handleRegisterBlur(val) {
            //判断当前输入框是否有值 有值的话，不触发失焦事件
            if (this.registerForm[val]) return
            this.registerFormActive[val] = false
        },

        /* 实现点击input里的提示文字时也可以实现聚焦事件 */
        handleRegisterClick(val) {
            this.$refs[`${val}Ref`].focus()
        },

        /* 点击注册 */
        handleRegister() {
            //当用户没有输入任何值时，对整个表单进行校验
            this.$refs['registerFormRef'].validate(valid => {

                //没校验成功，直接return出去
                if (!valid) return

                //校验成功，实现注册
                //拿到uuid
                const { uuid } = this.captchaImageCode
                register({ ...this.registerForm, uuid })
                    .then(res => {
                        //提示成功
                        this.$message.success(res.msg)
                    }).catch(err => {
                        console.log(err);

                        //失败后更新验证码
                        this.getCaptchaImage()

                    })
            })
        }

    },
}
</script>


<style lang="scss" scoped>
.register {
    height: 100vh;
    min-height: 800px;
    background-image: url("http://mashang.eicp.vip:5557/student/v3/admin/img/login-bg.d7992b58.jpg");
    background-size: 100% auto;


    .content {
        width: 640px;
        background-color: white;
        border-radius: 50% 0 0 50%;

        .form-content {
            width: 300px;

            // ::v-deep(el-form-item){
            //     position: relative;

            //    .el-form-item__error{
            //     position: absolute;
            //     top:100%;
            //     left: 0px;
            //    }

            // }

            .label-row {
                position: relative;

                span {
                    display: inline-block;
                    //em:以1个字为单位
                    width: 4em;
                    transition: 0.5s;

                    &.label {
                        color: #9da0a5;
                        font-weight: bold;
                        opacity: 1;

                        //把原来的字体隐藏掉
                        &.active {
                            opacity: 0;
                        }
                    }

                    &.pwplaceholder {
                        position: absolute;
                        top: 40px;
                        left: 35px;
                        color: #c4c5c8;
                        //z-index:值越大层级越高，解决层级叠加问题，input层级为1，设为2防止这个提示语被覆盖
                        z-index: 2;
                    }

                    &.placeholder {
                        position: absolute;
                        top: 50px;
                        left: 35px;
                        color: #c4c5c8;
                        //z-index:值越大层级越高，解决层级叠加问题，input层级为1，设为2防止这个提示语被覆盖
                        z-index: 2;
                    }

                    //聚焦时，改变样式
                    &.active {
                        top: 0;
                        left: 0;
                        color: #409eff;
                        font-weight: bold;
                    }
                }

            }

        }

    }
}
</style>
